<!DOCTYPE HTML>
<html>

<head>
	<meta charset="utf-8">
	<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
	<meta name="format-detection" content="telephone=no,email=no,date=no,aItemress=no">
	<title>我的积分</title>
	<link rel="stylesheet" type="text/css" href="../../css/base.css" />
	<style type="text/css">
		body {
			background: #F0F1F2;
		}

		.my-members {
			width: 100%;
			background: rgba(0, 90, 147, 1);
			padding: 0.25rem 0.15rem;
			box-sizing: border-box;
		}

		.my-members .title {
			font-size: 0.15rem;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: rgba(255, 255, 255, 1);
			line-height: 0.21rem;
		}

		.cont-wraper {
			display: flex;
			justify-content: space-between;
			align-items: center;
		}

		.cont-wraper .money {
			font-size: 0.4rem;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: rgba(255, 255, 255, 1);
			line-height: 0.56rem;
		}

		.desc{
			display: flex;
			justify-content: flex-end;
			align-items: center;
			font-size: 0.14rem;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: rgba(255, 255, 255, 1);
			line-height: 0.14rem;
		}

		.cont-wraper .right {
			display: flex;
			align-items: center;
		}

		.level {
			font-size: 0.14rem;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: rgba(255, 255, 255, 1);
			padding:0.05rem;
			line-height: 0.18rem;
			margin-right: 0.05rem;
			border: 1px solid #ffffdc;
	    background: none;
	    color: #ffffdc;
	    border-radius: 0.06rem;
	    padding: 0.05rem 0.1rem;
		}

		.icon {
			width: 0.12rem;
			height: 0.12rem;
			color: rgba(255, 255, 255, 1);
			border: 1px solid rgba(255, 255, 255, 1);
			border-radius: 50%;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.transaction-records {
			/* border-radius: 0.04rem 0.04rem 0px 0px; */
			margin-top: -0.05rem;
			position: relative;
			/* z-index: 1000; */
			background: #ffffff;
		}

		.transaction-records .title {
			font-size: 0.15rem;
			font-weight: 500;
			color: rgba(46, 46, 46, 1);
			line-height: 0.15rem;
			padding: 0.17rem 0.12rem;
			box-sizing: border-box;
			display: flex;
			align-items: center;
		}

		.transaction-records .title .left-icon {
			width: 0.03rem;
			height: 0.15rem;
			background: linear-gradient( 360deg, rgba(167, 233, 255, 1) 0%, rgba(0, 90, 147, 1) 100%);
			margin-right: 0.08rem;
		}

		.transaction-records .wraper {
			padding: 0 0.15rem;
		}

		.transaction-records .wraper .item {
			border-bottom: 1px solid #eeeeee;
			padding: 0.1rem 0;
		}

		.transaction-records .wraper .item .bottom {
			font-size: 0.12rem;
			font-weight: 400;
			color: rgba(153, 153, 153, 1);
			line-height: 0.17rem;
		}

		.transaction-records .wraper .item .top {
			display: flex;
			margin-bottom: 0.02rem;
			justify-content: space-between;
		}

		.transaction-records .wraper .item .top .left-title {
			font-size: 0.15rem;
			font-weight: 400;
			color: rgba(34, 34, 34, 1);
			line-height: 0.21rem;
		}

		.transaction-records .wraper .item .top .right-money {
			font-size: 0.15rem;
			font-weight: 500;
			color: rgba(34, 34, 34, 1);
			line-height: 0.21rem;
		}
		.topBox{
			/* border: 1px solid black; */
			width: 100%;
			height: 2.4rem;
			background: white;
			padding-top: 0.1rem;
			padding-left: 0.13rem;
			padding-right: 0.13rem;
			/* padding-bottom: 0.28rem; */
			/* margin-bottom: 0.28rem; */
		}
		.topImg{
			width: 100%;
			/* border: 1px solid black; */
			height: 1.8rem;
			background-image: url('../../image/membersImg.png');
			background-repeat: no-repeat;
			background-size: 100% 100%;
			position: relative;
		}
		.topImg img{
			display: block;
			width: auto;
			height: 100%;
		}
		.topTit{
			font-size: 0.16rem;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #FFFFFF;
			line-height: 0.36rem;
			position: absolute;
			top: 0.44rem;
			left: 0.48rem;
			/* margin-top: 0.84rem;
			margin-left: 0.68rem; */
		}
		.myMoney{
			font-size: 0.50rem;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
			line-height: 1rem;
			position: absolute;
			top: 0.64rem;
			left: 0.48rem;

		}

	</style>
</head>

<body>
	<div id="app" v-cloak="">
		<div class="data-statistics">
			<!-- 当前虚拟币 -->
			<div class="my-members">
				<div class="title">我的积分</div>
				<div class="cont-wraper">
					<div class="money" v-text="money"></div>
					<!-- open_win_page('会员规则') -->
					<div class="right" v-on:click="score_exchange">
						<div class="level">积分兑换</div>
					</div>
				</div>
				<div class="desc">{{remark}}</div>
			</div>
			<!-- <div class="topBox">
				<div class="topImg">
					<div class="topTit">我的积分</div>
					<div class="myMoney">{{money}}</div>
				</div>
			</div> -->
			<!-- 交明细记录 -->
			<div class="transaction-records">
				<div class="title">
					<div class="left-icon"></div>
					<div class="right-cont">积分记录</div>
				</div>
				<div class="wraper">

					<div class="item" v-for="(vo,index) in moneyList" :key="index">
						<div class="top">
							<div class="left-title" v-text="vo.remark"></div>
							<div class="right-money" v-text="vo.flag + vo.score"></div>
						</div>
						<div class="bottom" v-text="vo.add_time"></div>
					</div>

				</div>
			</div>
				<!-- 缺省页面 -->
				<div class="aui-text-center"  v-if="moneyList.length < 1" style="margin-top: 1.04rem;" tapmode >
					<img src="../../image/bg/bg-nonecar.png" style="width:1.51rem;margin-left:50%;transform:translateX(-50%);" />
					<div style="font-size:0.14rem;font-family:PingFangSC-Regular;font-weight:400;color:#B3B3B3;margin-top:0.27rem;width:100%; text-align: center;">
					   暂无数据
					</div>
				</div>
		</div>
	</div>
</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/vue.js"></script>
<script type="text/javascript" src="../../script/common.js"></script>
<script type="text/javascript" src="../../script/aui-dialog.js"></script>
<script>


		var vm = new Vue({
			el: "#app",
			data: {
				moneyList: [],
				level_name: '注册会员',
				money: 0,
				page: 1,
				loadmore:true,
				is_agent:0,
				remark:''
			},
			methods: {
				score_exchange:function(){
					api.confirm({
					    title: '积分兑换',
					    msg: '确定兑换成金币吗？',
					    buttons: ['确定', '取消']
					}, function(ret, err){
					    if( ret ){
					        //  alert( JSON.stringify( ret ) );
									if(ret.buttonIndex==1){
											get_data('api/User/scoreExchange', {
	 										 token: $api.getStorage('token')
	 									 }, function(ret) {
											 window.location.reload()
	 										 toast(ret.msg)
	 									 });
									}

					    }else{
					        //  alert( JSON.stringify( err ) );
					    }
					});

				},
				get_list: function() {
					get_data('api/User/scoreList', {
						token: $api.getStorage('token'),
						page: vm.page
					}, function(ret) {

						if(ret.status) {
							vm.money = ret.data.money
							vm.remark = ret.data.remark
							vm.level_name = ret.data.level_name
							if(ret.data.list.length < 20) {
								vm.loadmore = false
							}
							ret.data.list.forEach(function(el) {
								vm.moneyList.push(el)
							})
						}
					})
				}
			}
		})
		apiready = function() {
			vm.is_agent=api.pageParam.is_agent
			vm.get_list()
			fnInitPullRefresh(function(ret) {
				vm.page =1
				vm.loadmore = true
				vm.moneyList = []
				vm.level_name = '注册会员'
				vm.money = 0
				vm.get_list()
			})
			fnInitScrollToBottom(function(ret){
				if (vm.loadmore) {
					vm.page++;
					vm.get_list()
				}
			})
		}


	// var vm = new Vue({
	// 	el: "#app",
	// 	data: {
	// 		moneyList: [],
	// 		money: "",
	// 		level_name: "",
	// 		is_agent:0,
	// 		limit:10,
	// 		page:1,
	// 		arr:[],
	// 		index:1
	// 	},
	//
	// 	methods: {
	// 		get_info: function() {
	// 			get_data('api/User/balanceList', {
	// 				token: $api.getStorage('token'),
	// 				page:vm.page,
	// 				limit:5
	// 			}, function(ret) {
	// 				// alert(JSON.stringify(ret))
	// 				// console.log(JSON.stringify(ret));
	// 				if (ret.status) {
	// 					vm.moneyList = ret.data.list;
	// 					vm.money = ret.data.money;
	// 					vm.level_name = ret.data.level_name;
	// 					vm.is_agent=ret.data.is_agent
	//
	// 				}
	// 			})
	// 		},
	//
	// 		get_list:function(){
	// 			get_data('api/User/balanceList', {
	// 				token: $api.getStorage('token'),
	// 				page:vm.page,
	// 				limit:5
	// 			}, function(ret) {
	// 				// alert(JSON.stringify(ret))
	// 				// console.log(JSON.stringify(ret));
	// 				if (ret.status) {
	// 					vm.arr = ret.data.list;
	// 					vm.money = ret.data.money;
	// 					vm.level_name = ret.data.level_name;
	// 					vm.is_agent=ret.data.is_agent
	// 					var list = vm.arr
	// 					if(list.length > 0){
	// 						for(var i = 0;i<list.length;i++){
	// 							console.log(list[i]);
	// 							vm.moneyList.push(list[i])
	// 						}
	// 					}else{
	// 						vm.index = 0;
	// 					}
	// 				}
	// 			})
	// 		}
	//
	//
	// 	}
	// })
	//
	// apiready = function() {
	// 	vm.get_info();
	// 	api.addEventListener({
  //       　　name:'scrolltobottom',
  //           extra:{threshold:0}
  //       }, function(ret, err){
	// 				AJ(ret)
	// 		// if(vm.index == 1){
	// 			var page = vm.page+1
	// 			vm.page = page;
	// 			console.log(vm.page);
	//
	// 　　　　　　//上拉加载时需要加载的数据
	// 			vm.get_list();
	// 		// }
	//
  //      });
	//
	// 	// vm.is_agent=$api.getStorage('is_agent')
	// 	vm.is_agent=api.pageParam.is_agent
	//
	// };
</script>

</html>
